/*
 * @Descriptions: reactApp
 * @version: 1.0
 * @Author: CQY
 * @Date: 2022-03-30 09:46:55
 * @LastEditors: CQY
 * @LastEditTime: 2022-04-08 16:18:05
 */
import React,{useState} from 'react';

import { Table, Space,Button,ConfigProvider } from 'antd';

import { FormOutlined,DeleteTwoTone,PlusCircleOutlined } from '@ant-design/icons';

import StoreModal from '../../components/goods/store/StoreModal';

// 引入国际化 默认中文文案
import zhCN from 'antd/lib/locale/zh_CN';


const StorehouseManage = () => {

  // table渲染表头 行数据
const data = [
  {
    key: '1',
    storeName: '1',
    leader: 32,
    phone: '11122233312',
    remark:'ss',
    manage:'',
  },
  {
    key: '2',
    storeName: '2号仓库',
    leader: 42,
    phone: '23123156712',
    remark:'sd',
    manage:'',
  },
  {
    key: '3',
    storeName: '1号仓库',
    leader: 42,
    phone: '23512325733',
    remark:'备注',
    manage:'',
  },
  
];

// table渲染表头 列数据
const columns = [
  {
    title: '仓库名称',
    dataIndex: 'storeName',
    key: 'storeName',
    align:'center',
  },
  {
    title: '负责人',
    dataIndex: 'leader',
    key: 'leader',
    align:'center',
  },
  {
    title: '电话',
    dataIndex: 'phone',
    key: 'phone',
    align:'center',
  },
  {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      align:'center',
  },
  {
      title: '管理',
      dataIndex: 'manage',
      key: 'manage',
      render:(text,category)=><Space>
          <FormOutlined style={{cursor:"pointer",color:"#427DD0"}} onClick={()=>handlerModify(category)} />
      <DeleteTwoTone twoToneColor="#C00000" style={{cursor:"pointer"}} onClick={()=>handlerDelete(category)} />
      </Space>,
      align:'center',
    },
    
];

 // 点击修改按钮 用来存储输入框值的数据
 const [content, setContent] = useState();

  // 新增仓库Modal 的数据
  const [isModalVisible, setIsModalVisible] = useState(false);

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  // 修改仓库功能
  const [isModalModifyVisible,setIsModalModifyVisible] = useState(false)

  const handleModifyOk = () => {
    setIsModalModifyVisible(false);
  };

  const handleModifyCancel = () => {
    setIsModalModifyVisible(false);
  };

  // 新增仓库功能按钮
  const handlerClick = () =>{
    setIsModalVisible(true);
  }
   // 删除按钮功能
   const handlerDelete = (category) =>{
    console.log(category);
  }

  // 修改按钮
  const handlerModify = (category) =>{
    setIsModalModifyVisible(true)
    setContent(category)
  }

    return (
        <div>
            <ConfigProvider locale={zhCN}>

              {/* 新增仓库模态框 */}
              <StoreModal title='新增仓库' visible={isModalVisible} handleOk={handleOk} onCancel={handleCancel} />

              {/* 修改仓库 模态框 */}
              <StoreModal title='修改仓库' content={content} visible={isModalModifyVisible} handleOk={handleModifyOk} onCancel={handleModifyCancel} />

              {/* 表头管理按钮 */}
              <Space>
                  <Button type="danger">仓库列表</Button>
                  <Button type="primary" icon={<PlusCircleOutlined />}  onClick={()=>handlerClick()}>新增仓库</Button>
              </Space>
              {/* 表单 */}
              <Table
              bordered
              columns={columns}
              dataSource={data}
              pagination={{
                  hideOnSinglePage:true,
              }}
               />

            </ConfigProvider>
          
        </div>
    );
}

export default StorehouseManage;
